<template>
    <!-- 资料详情界面 -->
     
    <el-row>
        <!-- 主要内容区域：占17列，偏移1列 -->
        <el-col :span="17" :offset="1">
            <div v-if="state.currentInfo.title">
                <!-- 显示当前信息标题 -->
                <h2>{{ state.currentInfo.title }}</h2>

                <!-- 分隔线，使用评分图标装饰 -->
                <el-divider>
                </el-divider>
                <!-- 渲染HTML格式的信息内容 -->
                <div v-html="state.currentInfo.content"></div>
            </div>
            <el-empty v-else description="资料加载中..." />
        </el-col>
        
        <!-- 侧边栏区域：占4列，偏移1列，左拉1列 -->
        <el-col :span="4" :offset="1" :pull="1">
            <!-- 侧边栏内容区（当前为空） -->
        </el-col>
    </el-row>
</template>

<script setup>
// 引入Vue组合式API相关函数
import { onMounted, reactive } from "vue";
// 引入Element Plus消息提示组件
import { ElMessage } from 'element-plus';
// 引入axios用于HTTP请求
import axios from "axios";
// 引入Vue Router相关函数
import { useRoute } from "vue-router";

// 获取当前路由信息
const route = useRoute();
// 定义响应式状态对象
const state = reactive({
    currentInfo: {  // 当前信息详情
        title: '',
        content: ''
    },
    Cvs: []         // 用户简历列表
});


/**
 * 生命周期钩子：组件挂载后执行
 * 1. 获取路由参数中的信息ID
 * 2. 通过API获取信息详情
 * 3. 更新状态数据
 */
onMounted(async () => {
    const id = route.params.id;
    console.log("当前信息ID:", id);
    
    try {
        // 通过API获取信息详情
        const res = await axios.get(`/material/findById?id=${id}`);
        console.log("API响应:", res);
        
        // 更新信息详情，确保数据结构正确
        state.currentInfo = res.data.data || { title: '未找到资料', content: '' };
    } catch (error) {
        console.error("获取资料失败:", error);
        ElMessage.error("资料加载失败，请稍后重试");
        state.currentInfo = { title: '资料加载失败', content: '' };
    }
});
</script>

<style scoped lang="scss">
.el-row {
  margin-top: 30px;  // 设置行容器顶部间距
}

.time {
  font-size: 13px;   // 时间文本字体大小
  color: gray;       // 时间文本颜色
}
</style>